<script setup lang="ts">
import FormInfoInput from "./FormInfoInput.vue";
import InfoContainer from "./InfoContainer.vue";
import { ref } from "vue";
import { formInfo } from "./interface";

const props = withDefaults(defineProps<formInfo>(), {
  title: "模型压缩配置",
  btnNames: () => ["开始卸载", "暂停", "结束"],
  btnDisabled: () => [false, false, false],
  btnLoading: () => [false, false, false],
  formInfoList: () => [
    {
      id: 1,
      title: "Task1",
      inputType: "0",
      options: [
        {
          value: "Option1",
          label: "Option1"
        },
        {
          value: "Option2",
          label: "Option2"
        },
        {
          value: "Option3",
          label: "Option3"
        },
        {
          value: "Option4",
          label: "Option4"
        },
        {
          value: "Option5",
          label: "Option5"
        }
      ]
    },
    {
      id: 2,
      title: "Task2",
      inputType: "1",
      options: [
        {
          value: "Option1",
          label: "Option1"
        },
        {
          value: "Option2",
          label: "Option2"
        },
        {
          value: "Option3",
          label: "Option3"
        },
        {
          value: "Option4",
          label: "Option4"
        },
        {
          value: "Option5",
          label: "Option5"
        }
      ]
    },
    {
      id: 3,
      title: "Task3",
      inputType: "0",
      options: [
        {
          value: "Option1",
          label: "Option1"
        },
        {
          value: "Option2",
          label: "Option2"
        },
        {
          value: "Option3",
          label: "Option3"
        },
        {
          value: "Option4",
          label: "Option4"
        },
        {
          value: "Option5",
          label: "Option5"
        }
      ]
    }
  ]
});

// 绑定子组件
const infoChildren = ref<any>();

// 定义发射事件
const emit = defineEmits(["btnClick1", "btnClick2", "btnClick3"]);
const clickBtn1 = () => {
  console.log("clickBtn1");
  emit("btnClick1", ["btn1", infoChildren.value]);
};
const clickBtn2 = () => {
  console.log("clickBtn2");
  emit("btnClick2", ["btn2", infoChildren.value]);
};
const clickBtn3 = () => {
  console.log("clickBtn3");
  emit("btnClick3", ["btn3", infoChildren.value]);
};
</script>

<template>
  <InfoContainer :title="props.title">
    <el-row :gutter="20">
      <el-col :span="24">
        <FormInfoInput
          v-for="item in props.formInfoList"
          ref="infoChildren"
          :key="item.id"
          :title="item.title"
          :options="item.options"
          :placeholder="item.placeholder"
          :inputType="item.inputType"
        />
        <slot name="afc1"></slot>
      </el-col>
      <el-col :span="6" v-if="props.btnNames[0] != undefined">
        <el-button
          type="primary"
          class="info-btn form-btn1"
          :loading="props.btnLoading[0]"
          :disabled="props.btnDisabled[0]"
          @click="clickBtn1()"
          >{{ props.btnNames[0] }}</el-button
        >
      </el-col>
      <el-col :span="3" v-if="props.btnNames[1] != undefined">
        <el-button
          type="warning"
          class="info-btn form-btn2"
          :loading="props.btnLoading[1]"
          :disabled="props.btnDisabled[1]"
          @click="clickBtn2()"
          >{{ props.btnNames[1] }}</el-button
        >
      </el-col>
      <el-col :span="3" v-if="props.btnNames[2] != undefined">
        <el-button
          type="danger"
          class="info-btn form-btn3"
          :loading="props.btnLoading[2]"
          :disabled="props.btnDisabled[2]"
          @click="clickBtn3()"
          >{{ props.btnNames[2] }}</el-button
        >
      </el-col>
      <slot name="afc2"></slot>
    </el-row>
  </InfoContainer>
</template>

<style lang="scss" scoped>
.info-btn {
  width: 100% !important;
  margin-top: 2vh;
}

.form_btn1 {
  background-color: #0c78e1;
}

.form_btn2 {
  background-color: #e6a23c;
}

.form_btn3 {
  background-color: #c34d4d;
}
</style>
